<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			table {
				width: 100%;
				margin: 10px auto;
			}

			table tr {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form>
				<input type="text" placeholder="请输入搜索ID" v-model.lazy="searchId" />
				<input type="text" placeholder="请输入姓名" v-model="user.name" />
				<input type="text" placeholder="请输入邮箱" v-model="user.email" />
				<button @click.prevent="add">新增</button>
			</form>
			<table>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in filterUsers" :key="user.id">
					<td><input type="text" v-model="user.id" :disabled="isDisabled" /></td>
					<td><input type="text" v-model="user.name" :disabled="isDisabled" /></td>
					<td><input type="text" v-model="user.email" :disabled="isDisabled" /></td>
					<td><a href="#" @click="edit">编辑</a></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				// data: function() {
				// 	return {}
				// }
				data: {
					isDisabled: true,
					searchId: 0,
					user: {
						id: 0,
						name: '',
						email: ''
					},
					users: [{
						id: 1,
						name: '张三',
						email: 'zhangsan@163.com'
					}],
					filterUsers: []
				},
				methods: {
					edit() {
						this.isDisabled = false
					},
					add() {
						this.user.id = Math.ceil((Math.random() * 10000))
						this.users.push(this.user)
						this.filterUsers.push(this.user)
						this.user = {
							id: 0,
							name: '',
							email: ''
						}
					},
					search() {
						// this.filterUsers = this.users.filter(val => val.id == this.user.id)
					}
				},
				// computed: {
				// 	filterUsers() {
				// 		console.log(this.searchId)
				// 		return this.users.filter(val => {
				// 			if (this.searchId != 0) {
				// 				return val.id == this.searchId
				// 			}
				// 			return true;
				// 		});
				// 	}
				// }
				watch: {
					searchId: {
						immediate: true,
						handler(newVal, oldVal) {
							console.log(newVal)
							this.filterUsers = this.users.filter(val => {
								if (this.searchId != 0) {
									return val.id == newVal
								}
								return true;
							});
						}
					}
					// users: {
					// 	immediate: true,
					// 	deep: true,
					// 	handler(newVal, oldVal) {
					// 		this.filterUsers.length = 0;
					// 		this.users.forEach(val => this.filterUsers.push(val))
					// 	}
					// }
				}
			})
		</script>
	</body>
</html>
